﻿@{
    ViewBag.Title = "Página principal";
}
<link rel="stylesheet"
        href="~/Content/jquery-ui/redmond/jquery-ui-1.8.14.custom.css"
            type="text/css" />
    <link rel="stylesheet"
        href="~/Content/jquery-grid/ui.jqgrid.css" type="text/css" />

    <script src="~/Scripts/jquery-1.6.2.min.js"
        type="text/javascript"></script>
    <script src="~/Scripts/jquery-grid/grid.locale-en.js"
        type="text/javascript"></script>
    <script src="~/Scripts/jquery-grid/jquery.jqGrid.min.js"
        type="text/javascript"></script>

<script type="text/javascript">
    // the url to 
    var jqDataUrl = "../jQGrid/LoadjqData";
    $(document).ready(function () {

        // Set up the jquery grid
        $("#jqTable").jqGrid({
            // Ajax related configurations
            url: jqDataUrl,
            datatype: "json",
            mtype: "POST",

            // Specify the column names
            colNames: ["ID Solicitud", "ID Usuario", "Empleado", "Dias Disponibles",
                "Dias Solicitados", "Fecha Inicio", "Fecha Fin", "Fecha Registro",
                "Estado Solicitud", "Aprobador 1", "Aprobador 2", "Aprobador 3"],

            // Configure the columns
            colModel: [
            { name: "ID Solicitud", index: "requestID", width: 100, align: "left" },
            { name: "ID Usuario", index: "employeeID", width: 100, align: "left" },
            { name: "Empleado", index: "employeeID", width: 100, align: "left" },
            { name: "Dias Disponibles", index: "employeeID", width: 100, align: "center" },
            { name: "Dias Solicitados", index: "employeeID", width: 100, align: "center" },
            { name: "Fecha Inicio", index: "employeeID", width: 100, align: "left" },
            { name: "Fecha Fin", index: "employeeID", width: 100, align: "left" },
            { name: "Fecha Registro", index: "employeeID", width: 100, align: "left" },
            { name: "Estado", index: "employeeID", width: 120, align: "left" },
            { name: "Aprobador 1", index: "employeeID", width: 100, align: "left" },
            { name: "Aprobador 2", index: "aprobador1", width: 100, align: "left" },
            { name: "Aprobador 3", index: "aprobador2", width: 100, align: "left" }],

            // Grid total width and height
            width: 950,
            height:200,

            // Paging
            toppager: true,
            pager: $("#jqTablePager"),
            rowNum: 10,
            rowList: [10, 20, 50],
            viewrecords: true, // Specify if "total number of records" is displayed

            // Default sorting
            sortname: "requestID",
            sortorder: "asc",

            // Grid caption
            caption: "Solicitudes"
        }).navGrid("#jqTablePager",
            { refresh: true, add: false, edit: false, del: false },
                {}, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                { sopt: ["cn"] } // Search options. Some options can be set on column level
         );
    });
</script>
<br />
<br />

    <div>
      
        <table id="jqTable" class="scroll"></table>
        <div id="jqTablePager" />
            
    </div>
